@use '@/assets/scss/variables.scss' as *;
@use 'sass:color';
@use 'sass:map';

.z-slider-bar {
  color: var(--z-text-color-primary);
  height: 32px;
  padding: 3px;
  border-radius: var(--z-border-radius);
  background-color: var(--z-fill-color);

  &--wrap {
    height: 100%;
    display: flex;
    align-items: center;
  }

  &--item {
    cursor: pointer;
    height: 100%;
    display: flex;
    padding: 0 var(--z-page-padding);
    position: relative;
    min-width: 60px;
    font-size: 14px;
    transition: all 0.15s;
    align-items: center;
    user-select: none;
    white-space: nowrap;
    border-radius: var(--z-border-radius);
    justify-content: center;

    &:not(.is-active) + .z-slider-bar--item:not(.is-active)::after {
      top: 50%;
      left: 0;
      width: 1px;
      height: 14px;
      content: '';
      position: absolute;
      transform: translateY(-50%);
      background-color: var(--z-border-color);
    }

    &:hover {
      color: color.adjust($color: map.get($main-colors, ''), $lightness: 20%);
      background-color: color.adjust($color: map.get($main-colors, 'light'), $lightness: 10%);
    }

    &.is-active {
      color: var(--z-main-color);
      background-color: var(--z-fill-color-blank);
    }
  }

  &--icon {
    font-size: 16px;
    & + .z-slider-bar--label {
      margin-left: 4px;
    }
  }
}
